<template>
  <div class="app">
    <div class="oto"  @click="click">
      <div class="oto_container">
        <div class="img">
          <img :src="img" alt />
        </div>
        <div class="text">
          <p>
            <span style="font-size: 4vw;color: #595959;">{{name}}</span>
            <span style="font-size: 2.93333vw;color: #ea7a2f;margin-left:7px">{{flag}}</span>
          </p>
          <p style="font-size: 3.2vw;color: #b7b7b7;margin-top:5px">{{age}} {{sex}}年教龄</p>
        </div>
      </div>
      <div class="yuyue">{{oto}}</div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    img: {
      default:
        "https://msmk2019.oss-cn-shanghai.aliyuncs.com/uploads/image/2019X3gWvILU7J1571983543.png",
      type: String,
    },
    name: {
      default: "",
      type: String,
    },
    flag: {
      default: "",
      type: String,
    },
    age: {
      default: "",
      type: String,
    },
    sex: {
      default: 0,
      type: Number,
    },
    oto: {
      default: "预约",
      type: String,
    },
  },
  methods:{
      click(){
          this.$emit("click")
      }
  }
};
</script>

<style scoped lang="scss">
.app {
  padding: 0 2.66667vw;
}
.oto {
  height: 21.6vw;
  margin: 0 auto;
  display: flex;
  border-radius: 10px;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  background: #fff;
  padding: 0 4vw;
  img {
    width: 10.66667vw;
    height: 10.66667vw;
    border-radius: 50%;
  }
  .oto_container {
    display: flex;
    .text {
      margin-left: 20px;
    }
  
  }
    .yuyue {
      flex: none;
      width: 18.66667vw;
      height: 8.26667vw;
      line-height: 8.26667vw;
      background: #ebeefe;
      border-radius: 4.13333vw;
      font-size: 3.73333vw;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      color: #eb6100;
      border: none;
      text-align: center;
    }
}
</style>